<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <script>
        // ES6新增的数据类型  map  ： 字典 ；set：集合 ；
        // 一、Map ：和对象类似 ，弥补对象的不足 ，提高频繁操作的性能 ；
        // 1.对象不能以对象作为下标  ；
        // let myname = document.querySelector(".box");
        // let obj = {
        //     [myname]:"张三",
        //     age:20,
        //     hobby:{}
        // }
        // // console.log(obj);
        // for(let key in obj){
        //     console.log( key);
        // }
        // 2.ES6出现了字典 Map
        // let map = new Map(); // 创建一个map
        // let myname = document.querySelector(".box");
        // map.set(myname,"val")  //设置map的键名和键值 
        // console.log(map);

        // map创建 方式一 ：
        // let map = new Map();
        // map.set("name","张三");
        // map.set("age",20);
        // map.set('height',"178cm");
        // console.log(map);
        // map创建方式二 ：通过二维数组
        // let map = new Map([['name','张三'],['age',20],['height','178cm']]);
        // console.log(map);

        // 3.map的一些操作方法
        // let map = new Map([['name','张三'],['age',20],['height','178cm']]);
        //  1.获取  map.get('键名') 获取键值 
        // console.log( map.get('name'));
        //  2.查询是否有某个值 map.has("键名")
        // console.log( map.has("age1"));
        // 3.删除某个属性  map.delete('键名');
        // map.delete('name');
        // console.log(map);
        // 4.删除所有属性 clear 
        // map.clear();
        // console.log(map);

        // map特性 ：1.可以通过对象作为下标 。2.map可以统计长度 (size)3.如果是频繁的增删改查性能会更好
        // 4. map 会被json忽略掉；
        // let map = new Map([['name','张三'],['age',20],['height','178cm']]);
        //    console.log(  JSON.stringify(map));
        // console.log(map);
        // let obj = {
        //     name:"张三",
        //     age:20
        // }
        // let num = 0;
        // for(let key in obj){
        //     num++
        // }
        // console.log(num);

        // 二、set 集合 ：不能有重复的元素  
        // set 的创建 方式一：
        // let set = new Set();
        // set.add("张三");
        // set.add("李四");
        // set.add("王五");
        // console.log(set);
        // let arr = ['1',2,3];
        // console.log(arr);
        // set 创建方式二：一维数组；
        // let set = new Set(["张三","李四","王五"]);
        // console.log(set);
        // set下的方法 ：
        // 1.是否有某个属性 has 
        //   console.log(   set.has("李四"));
        // 2.删除某个属性 delete
        // set.delete("王五");
        // console.log(set);
        // 3.clear 删除所有属性
        // set.clear();
        // console.log(set);
        // 4.添加某个属性 add ;

        // 注意: set  可以去掉重复 ；面试题： 数组如何去掉重复元素？？
        // 先把重复的数组转成set 然后再转回数组；
        // let arr = ["a","b","a","c","b","d"];
        // let set = new Set(arr);
        // console.log(set);
        // // 把set转成数组；
        // // console.log([...set]);
        // console.log(Array.from(set));
        // set 集合 同样有 size属性 
        // console.log(set.size);
        // ES6使用没有过多的缺点 ？唯一缺点 兼容性； 

        // vue2.0  vue 3.0  -->
        // 2种性能更高的数组格式 weakSet  和  weakMap；在没有被引用情况下 会被自动回收；
        // 1.weakmap 或者是weakset 都不能存放值 ，只能存放对象；
        // let weakmap = new WeakMap([[{},"张安"]]);
        // console.log(weakmap);
        // 2.weak下的方法 只有 add has delete

    </script>
</body>
</html>